<template>
    <view class="flex-col homepage">
		<view class="wrapper">
		    <view class="u-line-1 text">最多可添加5位就诊人</view>
		</view>
		<view  class="flex-col wrapper-two" v-for="patient in patient" :key="patient.id">
			<view @click="patientById(patient.id)">
				<!-- <u--input v-model="patient.id" type="hidden" border="none" placeholder="选填"></u--input> -->
				<view class="flex-row wraper-row" >
					<view class="u-line-1 text-two">{{patient.name}}</view>
					<view class="flex-row wraper-row-two" style="position: absolute; margin-left: 60px ;">
						<text v-if="patient.relation == '本人'">
							<view class="u-line-1 text-six1">本人</view>
						</text>
						<text v-if="patient.relation == '子女'">
							<view class="u-line-1 text-six">子女</view>
						</text>
						<text v-if="patient.relation == '夫妻'">
							<view class="u-line-1 text-six">夫妻</view>
						</text>
						<text v-if="patient.relation == '父母'">
							<view class="u-line-1 text-six">父母</view>
						</text>
						<text v-if="patient.relation == '朋友'">
							<view class="u-line-1 text-six">朋友</view>
						</text>
					</view>
					<view class="u-line-1 text-three">设置为默认</view>
					<text v-if="patient.defaultPerson == '是'">
						<u-switch class="switch" v-model="isopen" size="20"></u-switch>
					</text>
					<text v-if="patient.defaultPerson == '否'">
						<u-switch class="switch" v-model="isopens" size="20"></u-switch>
					</text>
				</view>
				<view class="u-line-1 text-four">{{patient.number}}</view>
			</view>
		</view>
        <u-button @click="patientSave" class="button">
            添加就诊人
        </u-button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				URL:'http://localhost:9000/',//主域名
				isopen: true,
				isopens:false,
				patient:[],
				userId:'',
            }
        },
        methods: {

			//查看就诊人信息
			patientById(id){
				console.log(id)
				uni.navigateTo({
					url:"patientSave?id="+id
				})
			},
			
			//跳转添加就诊人页面
			patientSave(){
				uni.navigateTo({
					url:"patientSave?userId="+this.userId
				})
			},

        },
		
		onLoad(id){
			this.userId = id.id
			console.log(this.userId)
			// 获取当前用户绑定的就诊人
			uni.request({
				url:this.URL+"user/user/the-patient/patientByUserId/"+this.userId,
				method:"GET",
				success: (res) => {
					console.log(res)
					if(res.data.code == 20000){
						this.patient = res.data.data.patientList
						console.log(this.patient)
					}
				}
			})
		}
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        height: 1500rpx;

        .wrapper {
            width: 100%;
            margin-bottom: 64rpx;
            padding: 22rpx 0rpx 18rpx 46rpx;
            background: #fbf1e9;
			// background: white;

            .text {
                width: 100%;
                font-size: 24rpx;
                font-weight: 545;
                color: #ff8838;
            }
        }

        .wrapper-two {
            width: 682rpx;
            margin-right: auto;
            margin-bottom: 64rpx;
            margin-left: auto;
            padding: 60rpx 0rpx 52rpx 40rpx;
            border-radius: 20rpx;
            background: #f5f9ff;

            .wraper-row {
                width: 642rpx;
                margin-bottom: 32rpx;

                .text-two {
                    width: 100%;
                    font-size: 32rpx;
                }

                .tag {
                    height: 38rpx;
                    border-radius: 20rpx;
                    bottom: 0rpx;
                    left: 108rpx;
                    position: absolute;
                }

                .text-three {
                    width: 148rpx;
                    bottom: 0rpx;
                    right: 150rpx;
                    font-size: 24rpx;
                    position: absolute;
                    color: #2c2c2c;
                }

                .switch {
                    top: -8rpx;
                    right: 46rpx;
                    position: absolute;
                }
            }

            .text-four {
                width: 100%;
                font-size: 24rpx;
                color: #c9b9af;
            }
        }
		.wraper-row-two {
		    width: 78rpx;
		    justify-content: center;
		    margin: 0rpx 0rpx 32rpx 88rpx;
		    padding-top: 2rpx;
		    border-radius: 20rpx;
		    background: #e2edfe;
		
		    .text-six {
		        width: 58rpx;
		        font-size: 28rpx;
		        color: #7c9cff;
		    }
		}

        .button {
            width: 694rpx;
            height: 90rpx;
            display: block;
            margin-right: auto;
            margin-left: auto;
            font-size: 36rpx;
            background: #006eff;
            color: #ffffff;
        }
    }
</style>